<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试 / 渐变色</title>
    <script src="../dist/H5Charts.js"></script>
    <style>
        #root {
            width: 500px;
            height: 500px;
            background-color: #c9c3c3;
        }
    </style>
</head>

<body>
    <div id="root"></div>

    <script>

        var mychart = new H5Charts(document.getElementById("root"), {
            color: ["red",

                //  {
                //     type: 'linear',
                //     x1: 0,
                //     y1: 0,
                //     x2: 500,
                //     y2: 500,
                //     colorStops: [{
                //         offset: 0, color: 'red' // 0% 处的颜色
                //     }, {
                //         offset: 1, color: 'blue' // 100% 处的颜色
                //     }],
                // }

                // {
                //     type: 'radial',
                //     cx: 250,
                //     cy: 250,
                //     radius: 250,
                //     colorStops: [{
                //         offset: 0, color: 'red' // 0% 处的颜色
                //     }, {
                //         offset: 1, color: 'blue' // 100% 处的颜色
                //     }]
                // }

                {
                    type: 'conic',
                    cx: 250,
                    cy: 250,
                    beginDeg: 0,
                    deg: Math.PI * 2,
                    colorStops: [{
                        offset: 0, color: 'pink' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                    }]
                }

                , "pink"],
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: "bar",
                data: [120, 200, 150, 80, 70, 110, 130]
            }, {
                type: "bar",
                data: [120, 200, 150, 80, 70, 110, 130]
            }]
        });

    </script>

</body>

</html>